<template>
	<view class="content">
		<template slot="top">
			<view class="header-top">
				<p class="header-title">协会会员</p>
				<view class="search-box">
					<span class="search-img"></span>
					<input class="search-input" :value="keyWord" @input="inputchange"
						placeholder-class="input-placeholder" type="text" placeholder="输入关键词" />
				</view>
				<view class="dropdownBox">
					<view class="dropdownBox-left">
						<up-dropdown ref="uDropdownRef" class="u-dropdown" menu-icon="arrow-down-fill"
							menu-icon-size="10">
							<up-dropdown-item v-model="value1" title="协会职务">
								<view class="slot-content" style="background-color: #FFFFFF;">
									<scroll-view scroll-y="true" style="height: 400rpx;">
										<view class="dropdownscr-item">
											<view @click="dropchange(item,index)" class="dropdown-btn"
												:class="[dropdownbtnnum == index ? 'dropdown-btnactive': '']"
												v-for="(item,index) in dutieslist" :key="index">
												{{item.content}}
											</view>
										</view>

									</scroll-view>
								</view>
							</up-dropdown-item>
							<up-dropdown-item v-model="value2" title="所属行业">
								<view class="slot-content" style="background-color: #FFFFFF;">
									<scroll-view scroll-y="true" style="height: 600rpx;">
										<view class="dropdownscr-item">
											<view @click="dropchange2(item,index)" class="dropdown-btn"
												:class="[dropdownbtnnum2 == index ? 'dropdown-btnactive': '']"
												v-for="(item,index) in GetConditiondata.industrys" :key="index">
												{{item.content}}
											</view>
										</view>

									</scroll-view>
								</view>
							</up-dropdown-item>
						</up-dropdown>

					</view>
					<view class="dropdownBox-right" @click="resetting">
						<view>重置</view>
						<image class="right-img" :src="proxy.serverimageUrl + 'member/chongzhi.png'" mode="">
						</image>
					</view>

				</view>
			</view>
		</template>
		<!-- <view style="padding:0 30rpx"> -->
		<z-paging :paging-style="{height: '73.5vh'}" default-page-no="1" default-page-size="10" :fixed="false"
			ref="paging" v-model="dataList" @query="queryList">
			<!-- <scroll-view scroll-y="true" class="ScrollView" @scrolltolower="loadMore"> -->
			<view class="member-item" @click="godetail(item)" v-for="(item,index) in dataList" :key="index">
				<view class="item-left">
					<!-- <up-image :show-loading="true" shape="circle" :src="item.avatar" width="80px" height="80px"></up-image> -->
					<!-- <up-avatar :src="item.avatar" mode="widthFix" shape="square" size="60"></up-avatar> -->
					<image v-if="item.avatar" :src="item.avatar" mode=""></image>
					<image v-else :src="proxy.serverimageUrl + 'mypage/avataricon.png'" mode=""></image>
				</view>
				<view class="item-right">
					<view class="title-name">
						<view class="nametext">
							{{item.memberName}}
						</view>
						<image v-if="item.employmentSituation == '会长'" :src="proxy.serverimageUrl+'member/1.png'"
							mode=""></image>
						<image v-if="item.employmentSituation == '副会长'" :src="proxy.serverimageUrl+'member/2.png'"
							mode=""></image>
						<image v-if="item.employmentSituation == '理事'" :src="proxy.serverimageUrl+'member/3.png'"
							mode=""></image>
						<image v-if="item.employmentSituation == '会员'" :src="proxy.serverimageUrl+'member/4.png'"
							mode=""></image>
					</view>
					<view style="display: flex;align-items: center;flex-wrap: wrap;">
						<view class="labelBox" v-for="(t,i) in item.mainDutieslist" :key="index">
							<span class="labelBox-item">
								{{t.organization}}{{t.duties}}
							</span>
						</view>
					</view>

					<view class="duties">
						{{item.employmentSituation}}
					</view>
					<view class="company">
						{{item.workUnit}}
					</view>
				</view>
			</view>
		</z-paging>
		<!-- </view> -->
	</view>
</template>


<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		miniProgramList,
		getCondition,
		addHistory
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady,
		onShow,
		onPullDownRefresh,
	} from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	// import UseZPaging from "z-paging/c";
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	onLoad(() => {
		GetCondition()
		// queryList()
	})
	const paging = ref(null)
	const dataList = ref([])
	onShow(() => {})
	const keyWord = ref('')
	const industry = ref('')
	const employmentSituation = ref('')
	const queryList = (pageNo, pageSize) => {
		console.log(pageNo, pageSize);
		let params = {
			pageNum: pageNo,
			pageSize: pageSize,
			employmentSituation: employmentSituation.value,
			keyWord: keyWord.value,
			industry: industry.value
		}
		miniProgramList(params).then(res => {
			if (res.code == 200) {
				res.rows.map(item => {
					if (item.mainDutiesEntities.length > 2) {
						item.mainDutieslist = item.mainDutiesEntities.slice(0, 2)
					} else {
						item.mainDutieslist = item.mainDutiesEntities
					}
				})
				const list = res.rows
				paging.value.complete(list)
			}
		}).catch(res => {
			paging.value.complete(false)
		})
	}

	const inputchange = debounce(function(e) {
		paging.value.reload()
		keyWord.value = e.detail.value
		queryList()
		console.log(e);
	}, 500)

	function debounce(func, wait) {
		let timeout;
		return function(...args) {
			clearTimeout(timeout);
			timeout = setTimeout(() => {
				func.apply(this, args);
			}, wait);
		};
	}
	const resetting = () => {
		keyWord.value = ''
		industry.value = ''
		employmentSituation.value = ''
		paging.value.reload()
		dropdownbtnnum.value = null
		dropdownbtnnum2.value = null
		queryList()
		uDropdownRef.value.close()
	}
	/*请求接口查询数据*/
	const GetConditiondata = ref({})
	const GetCondition = () => {
		getCondition().then(res => {
			GetConditiondata.value = res.data
		})
	}
	const godetail = (item) => {
		let params = {
			amid: uni.getStorageSync('mid'),
			mid: item.mid
		}
		addHistory(params).then(res => {
			console.log(res);
		})
		uni.navigateTo({
			url: '/subpages/memberdetail/index?mid=' + item.mid
		})
	}
	const value1 = ref(1)
	const value2 = ref(1)
	const uDropdownRef = ref(null)
	const dropdownbtnnum = ref(null)
	const dropdownbtnnum2 = ref(null)
	const dutieslist = ref([{
			content: '全部职务',
			id: 0
		},
		{
			content: '会长',
			id: 1
		},
		{
			content: '副会长',
			id: 2
		},
		{
			content: '理事',
			id: 3
		},
		{
			content: '会员',
			id: 4
		},
	])
	const dropchange = (item, index) => {
		paging.value.reload()
		dropdownbtnnum.value = index
		employmentSituation.value = item.cid ? '' : item.content == '全部职务' ? '' : item.content
		queryList()
		uDropdownRef.value.close()
	}
	const dropchange2 = (item, index) => {
		paging.value.reload()
		dropdownbtnnum2.value = index
		industry.value = item.cid
		queryList()
		uDropdownRef.value.close()
	}
</script>

<style scoped lang="scss">
	.content {
		width: 750rpx;
		height: 100vh;
		background-color: #F7F7F9;

		.header-top {
			width: 100%;
			// height: 354rpx;
			background: #FFFFFF;
			padding-top: 114rpx;

			.header-title {
				font-family: Alibaba PuHuiTi;
				font-weight: bold;
				font-size: 36rpx;
				color: #202020;
				padding: 0 40rpx;
			}

			.search-box {
				margin-top: 39rpx;
				padding: 0 40rpx;
				position: relative;

				.search-img::after {
					content: '';
					width: 30rpx;
					height: 31rpx;
					position: absolute;
					left: 65rpx;
					top: 28rpx;
					background: url(http://1001.zmxeye.com/youthAssociation/static/member/search.png) center center / 100% 100% no-repeat;
				}
				.search-input {
					border: 1px solid #2854B7;
					border-radius: 16rpx;
					height: 80rpx;
					padding-left: 80rpx
				}

				::v-deep .input-placeholder {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 26rpx;
					color: #ACAFB5;
					// margin-left: 75rpx;
				}
			}

			.dropdownBox {
				margin-top: 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// padding:0 20rpx;
				.dropdownBox-left {
					// margin-left: 20rpx;
					width: 50%;

					::v-deep .u-dropdown {
						margin-left: 20rpx;

						.u-dropdown__content {
							width: 200%;
							left: -20rpx;
						}

						.slot-content {

							.dropdownscr-item {
								// margin-top: 30rpx;
								display: flex;
								align-items: center;
								flex-wrap: wrap;

								.dropdown-btnactive {
									background: #E6EEFF !important;
									color: #2854B7 !important;
								}

								.dropdown-btn {
									margin-left: 38rpx;
									margin-top: 20rpx;
									background: #F4F5F8;
									border-radius: 4rpx;
									font-family: Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 26rpx;
									color: #050101;
									padding: 30rpx;
								}
							}

						}
					}
				}

				.dropdownBox-right {
					margin-right: 40rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 24rpx;
					display: flex;
					align-items: center;
					color: #2854B7;

					.right-img {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
						// margin-top: 2rpx; 
					}
				}
			}
		}

		::v-deep .zp-paging-container-content {
			padding: 20rpx 30rpx;
		}

		// .ScrollView {
		// 	box-sizing: border-box;
		// 	padding: 0rpx 40rpx;
		// 	height: calc(100vh - 390rpx);
		// 	padding-top: 30rpx;

		.member-item {
			// margin-top: 30rpx;
			margin-bottom: 30rpx;
			width: 100%;
			padding: 40rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;

			.item-left {
				width: 140rpx;
				height: 140rpx;
				position: relative;
				overflow: hidden;
				border-radius: 50%;

				image {
					position: absolute;
					width: 140rpx;
					height: 170rpx;
					// border-radius: 50%;
					top: 0;
				}
			}

			.item-right {
				width: 450rpx;
				margin-left: 28rpx;

				.title-name {
					display: flex;
					align-items: center;

					.nametext {
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 34rpx;
						color: #252525;
					}

					image {
						width: 104rpx;
						height: 43rpx;
						margin-left: 14rpx;
					}
				}

				.labelBox {
					margin-top: 14rpx;

					.labelBox-item {
						// width: 130rpx;
						// height: 36rpx;
						background: #E6EEFF;
						padding: 8rpx 12rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 22rpx;
						color: #2A55B7;
					}
				}

				.duties {
					margin-top: 18rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #BBC0CA;
				}

				.company {
					margin-top: 11rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: #BBC0CA;
				}
			}
		}

	}
</style>